<template>
	<view class="sol-avatar" :class="calcAvatarSize.c" :style="calcAvatarSize.s" @click="$_click">
		<image class="sol-avatar_img" :class="{'sol-avatar_square':square}" :style="{backgroundColor}" @error="$_error"
			:src="calcSrc" mode="scaleToFill" :lazy-load="true"></image>
		<image class="sol-avatar_gender" :style="calcGenderSizeStyle" :src="calcGenderSrc" mode="scaleToFill"
			:lazy-load="true" v-if="gender"></image>
	</view>
</template>

<script>
	/**  
	 * 用户头像组件
	 * @property {Object} size 大小 sm md lg Number  
	 * @property {Object} square 是否矩形形状 默认圆形  
	 * @property {Object} src 图片地址  
	 * @property {Object} src-error 加载图片失败地址  
	 * @property {Object} gender 性别标记  
	 * @property {Object} background-color 背景颜色  
	 * @event {Function} click 点击事件  
	 */
	export default {
		name: 'sol-avatar',

		props: {
			// 大小 sm md lg Number
			size: {
				validator: val => {
					return typeof val === 'number' || ['sm', 'md', 'lg'].includes(val);
				},
				default: 'md'
			},
			// 是否矩形形状 默认圆形
			square: {
				type: Boolean,
				default: false
			},
			// 图片地址
			src: {
				type: String,
				default: '/static/icon-default/icon_logo.png'
			},
			// 加载图片失败地址
			srcError: {
				type: String,
				default: '/static/icon-default/icon_avatar.png'
			},
			// 性别
			gender: {
				type: [Number, String],
				default: ''
			},
			// 背景颜色
			backgroundColor: {
				type: String,
				default: '23'
			},
		},

		data() {
			return {
				// 图片是否加载错误，占位图
				isError: false,
			};
		},
		
		computed: {
			// 计算头像框大小
			calcAvatarSize() {
				let size = {
					c: '',
					s: ''
				}
				if (typeof this.size === 'number') {
					size.s = `width:${this.size}rpx;height:${this.size}rpx;`;
				} else {
					size.c = `sol-avatar_img-${this.size}`;
				}
				return size
			},
			// 计算标签大小
			calcGenderSizeStyle() {
				let num = 32;
				if (typeof this.size == 'number') {
					num = Math.floor(this.size / 3);
				} else {
					if (this.size == 'sm') num = 24;
					if (this.size == 'md') num = 32;
					if (this.size == 'lg') num = 42;
				}
				return `height: ${num}rpx;width: ${num}rpx;`
			},
			// 计算改变标签铭牌
			calcGenderSrc() {
				let gender = 'male';
				if (this.gender == 'famale' || this.gender == 2) {
					gender = 'famale';
				}
				if (this.gender == 'male' || this.gender == 1) {
					gender = 'male';
				}
				return `/static/icon-default/icon_${gender}.png`
			},
			// 计算改变图片地址
			calcSrc() {
				// 套上尺寸
				let src =this.src;
				// 错误或者空
				if(this.isError || !this.src){
					src = this.srcError;
				}
				return src;
			}
		},
		
		methods: {
			$_click() {
				this.$emit('click')
			},
			$_error(err) {
				this.isError = true;
				this.$emit('error', err);
			}
		}
	}
</script>

<style scoped lang="scss">
	.sol-avatar {
		display: block;
		position: relative;

		&_img {
			height: 100%;
			width: 100%;
			overflow: hidden;
			border-radius: 50%;

			&-sm {
				height: 72rpx;
				width: 72rpx;
			}

			&-md {
				height: 112rpx;
				width: 112rpx;
			}

			&-lg {
				height: 144rpx;
				width: 144rpx;
			}
		}

		&_square {
			border-radius: 24rpx;
		}

		&_gender {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
</style>
